<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			width: 100%;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			background: skyblue;
		}

		#canvas {
			background-color: #fff;
			border:2px solid red;
		}
	</style>
	<body>
		<canvas id="canvas"></canvas>
	</body>
	<script>
		class FinMainColor{
			constructor(){
				var canvas=document.createElement('canvas');
					canvas.width=200;
					canvas.heigh=200;
				this.canvas=canvas;
				this.ctx=canvas.getContext('2d')
			}
			setColor(arr){
				var len=0,
						color='rgba(0,0,0,0)',
						obj={};
				for(var i=0;i<this.canvas.width*this.canvas.height;i++){
					var r=arr[i];
					var g=arr[i+1]
					var b=arr[i+2];
					var a=arr[i+3];
					var color=`rgb(${r},${g},${b},${a})`
					obj[color]? arr[color]+=1 :arr[color]=1;
				}
				var max=0;
				for(var key in obj){
					if(obj[key]>max) {
						max=obj[key];
						color=key;
					}
				}
				return color;
			}
			get(src){
				if(!src){
					throw '参数src不能为空'
					return;
				}
				var img = new Image()
				img.src = src;
				img.width=200;
				img.height=200;
				return new Promise((resolve)=>{
					img.onload=()=>{
						var ctx=this.ctx;
						ctx.drawImage(img, 0, 0, 200, 200);
						var ImgDdta=ctx.getImageData(0,0,200,200)
						resolve(this.setColor(ImgDdta.data))
					}
				})
			}
		}
		var MinColor=new FinMainColor()
		var src = 'https://imgessl.kugou.com/fmlogov2/480/20220125132319310134.jpg'
		MinColor.get(src).then(
		result=>{
			console.log(result)
		})
	</script>
</html>
